<template>
    <headerTop></headerTop>
    <div class="tao-row bg-white px-4 py-3 index">
        <div v-if="errorCode=='401'">
            <p style="text-align:center;margin:100px 0;font-size: 20px;">
                <Icon type="ios-alert" style="font-size: 50px;vertical-align: middle;"/>排队抢票中，您也可以去
                <router-link style="font-size: 20px;vertical-align: middle;color:var(--danger-color);" to="/">个人中心</router-link>
                查看订单
            </p>
        </div>
        <div v-show="errorCode=='0000'&&orderInfo[0].orderType==-1">
            <p style="text-align:center;margin:100px 0;font-size: 20px;">
                <Icon type="md-close-circle" style="font-size: 50px;vertical-align: middle;"/>订单已经超时被取消，请重新下单进行支付
                <router-link style="font-size: 20px;vertical-align: middle;color:var(--danger-color);" to="/">个人中心</router-link>
                查看订单
            </p>
        </div>
        <div v-if="errorCode=='404'">
            <p style="text-align:center;margin:100px 0;font-size: 20px;">
                <Icon type="ios-alert" style="font-size: 50px;vertical-align: middle;"/>非法参数,请退出收银台后支付
                <router-link style="font-size: 20px;vertical-align: middle;color:var(--danger-color);" to="/">返回</router-link>
            </p>
        </div>
        <div v-if="payTime>0">
            <stepp v-if="errorCode=='0000'" :items="['选择商品','确认订单信息','支付订单','收取商品']" :select="3"></stepp>
            <div class="mt-4" v-if="errorCode=='0000'">
                <Table border v-if="orderInfo.length!=0" :columns="orderTableCloumns" :data="orderInfo"></Table>
            </div>
            <div class="mt-3" v-if="errorCode=='0000'">
                <p v-if="orderInfo.length!=0" class="fs-4">应付总金额: <span class="fs-4" style="color:var(--danger-color);">{{orderInfo[0].totalAmount}}</span> 元</p>
            </div>
            <div class="mt-3" v-if="errorCode=='0000'">
                <p v-if="orderInfo.length!=0" class="fs-6">请在 {{payTime}} 秒 内完成支付</p>
            </div>
            <div class="mt-3" v-if="errorCode=='0000'">
                <p>以下支付平台都支持大多数银行卡:</p>
            </div>
            <div class="mt-3" v-if="errorCode=='0000'">
                <RadioGroup v-model="paytype">
                    <Radio label="微信">
                        <img style="height:30px;" src="/static/img/wxpay.png" alt="">
                    </Radio>
                    <Radio label="支付宝">
                        <img style="height:30px;padding:3px 0 4px 5px;" src="https://gw.alipayobjects.com/mdn/member_frontWeb/afts/img/A*oRlnSYAsgYQAAAAAAAAAAABkARQnAQ" alt="">
                    </Radio>
                </RadioGroup>
            </div>
            <div class="mt-3 mb-5" v-if="errorCode=='0000'">
                <Button type="primary" @click="submitOrder">确认无误，支付</Button>
            </div>
        </div>
    </div>
    <footerr></footerr>
</template>
<script>
import stepp from "../../components/step/step.vue"
import {confirmpay,wechatpay,alipay} from "../../utils/api"
export default {
    components:{stepp},
    mounted(){
        let orderNo = this.$route.query.orderNo;
        this.confirmpayInfo(orderNo);
    },
    data(){
        return {
            orderTableCloumns:[
                {
                    title:"订单编号",
                    key:"orderNo"
                },
                {
                    title:"商品名称",
                    key:"itemName"
                },
                {
                    title:"订单金额",
                    key:"totalAmount"
                },
                {
                    title:"应付金额",
                    key:"totalAmount"
                }
            ],
            payTime:null,
            errorCode:null,
            orderInfo:[],
            paytype:"微信"
        }
    },
    methods:{
        confirmpayInfo(orderNo){
            confirmpay(orderNo).then(({data})=>{
                this.orderInfo.length=0;
                if(data.errorCode=='401'){
                    setTimeout(()=>{
                        this.confirmpayInfo(orderNo);
                    },1000);
                }else if(data.errorCode=='0000'){
                    this.orderInfo.push(data.data);
                    this.payTimeout();
                }
                this.errorCode=data.errorCode;
            });
        },
        payTimeout(){
            let timeout = new Date(this.$Date(this.orderInfo[0].createdTime).add(5,"minute").format("YYYY-MM-DD HH:mm:ss"));
            let time = new Date();
            this.payTime = Math.floor((timeout.getTime()-time.getTime())/1000);
            if(this.payTime>0){
                setTimeout(()=>{
                    this.payTimeout();
                },1000);
            }
        },
        submitOrder(){
            if(this.paytype==='微信'){
                wechatpay(this.orderInfo[0].orderNo).then(({data})=>{
                    this.$router.push({path:"/wechatpay",query:data.data})
                })
            }else if(this.paytype==='支付宝'){
                alipay(this.orderInfo[0].orderNo).then(({data})=>{
                    window.document.getElementsByTagName("body")[0].innerHTML=data;
                    eval('document.forms[0].submit();');
                })
            }
        }
    }
}
</script>
<style lang="less">
    
</style>